<template>
  <div>
    <div style="background:#eee;padding:10px 10px">
      <i class="iconfont icon-left" style="margin:0 20px 0 5px" @click="()=>{this.$router.go(-1)}"></i>
      <span>绑定银行卡</span>
    </div>
    <div>
      <van-swipe-cell v-for="item in bankCardItem" :key="item.id">
        <van-cell :border="false" :title="item.bankName" :value="item.card" />
        <template slot="left">
          <van-button square type="primary" text="设为默认" @click="settingDefault(item)" />
        </template>
        <template slot="right">
          <van-button square type="danger" @click="beforeClose(item)" text="删除" />
        </template>
      </van-swipe-cell>
    </div>
    <div>
      <van-button block class="bottomBtn" @click="getBankList(),addBankCardBottomPopup=true">添加银行卡</van-button>
    </div>
    <div>
      <van-popup
        v-model="addBankCardBottomPopup"
        position="bottom"
        style=" height: 50%;padding:10px 0; "
      >
        <van-field v-model="password" type="password" label="安全密码" />
        <van-field
          readonly
          clickable
          name="picker"
          :value="bank.text"
          label="银行"
          placeholder="点击选择银行"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="bankColumns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field v-model="bankBranch" label="支行" />
        <van-field v-model="cardNum" label="卡号" />
        <van-field v-model="addr" label="开户地址" />
        <van-field v-model="mobileCode" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <van-button
            slot="button"
            size="small"
            type="primary"
            :disabled="btnDb"
            @click="getMobileCode()"
          >{{btnText}}</van-button>
        </van-field>
        <div>
          <van-button block class="bottomBtn" @click="addBank()">确定添加</van-button>
        </div>
      </van-popup>
    </div>
    <van-popup v-model="deletePopup" position="bottom" style=" height: 50%; ">
      <van-password-input
        :value="deletePassword"
        info="密码为 6 位数字"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <van-number-keyboard
        :show="showKeyboard"
        @input="onInput"
        @delete="onDelete"
        @blur="showKeyboard = false"
      />
      <!-- <van-button
        block
        color="#4caf50"
        style="position:absolute;bottom:0;border-radius:30px;"
        @click="deleteBank()"
      >确定</van-button>-->
    </van-popup>
  </div>
</template>
<script>
export default {
  data: () => ({
    addBankCardBottomPopup: false,
    text: "",
    btnText: "发送验证码",
    btnDb: false,
    deletePopup: false,
    num: 300,
    bankCardItem: [],
    bank: "",
    bankColumns: [],
    showPicker: false,
    password: null,
    bankBranch: "", //支行
    cardNum: "", //卡号
    addr: "", //地址
    mobileCode: null, //短信验证码
    deletePassword: "",
    showKeyboard: true,
    currentBankItem: null
  }),
  computed: {
    phone() {
      return JSON.parse(this.$store.state.memberInfo).phone;
    }
  },
  created() {
    this.getCardList();
  },
  watch: {
    deletePassword() {
      if (this.deletePassword.length === 6) {
        this.deletePopup = false;
        this.deleteBank();
      }
    }
  },
  mounted() {},
  methods: {
    getCardList() {
      this.$axios.get(`ym/member-bankmanager/bank-info`).then(res => {
        if (res.code === 0) {
          this.bankCardItem = res.data;
        } else {
          this.$Toast("银行卡获取失败!");
        }
      });
    },
    beforeClose(item) {
      this.deletePopup = true;
      this.showKeyboard = true;
      this.currentBankItem = item;
      //console.log(item.id);
    },
    settingDefault(item) {
      this.$axios
        .post(`ym/member-bankmanager/set-default`, { id: item.id })
        .then(res => {
          if (res.data.code === 0) {
            this.$Toast("设置成功");
          } else {
            this.$Toast(res.data.msg);
          }
          //console.log(res);
        });
    },
    deleteBank() {
      let event = {
        id: this.currentBankItem.id,
        paypassword: this.deletePassword
      };
      //console.log(event);
      this.$axios.post(`ym/member-bankmanager/unbind-bank`, event).then(res => {
        //console.log(res);
        if (res.data.code === 0) {
          this.$Toast(res.data.msg);
          this.bankCardItem.forEach((msg, index) => {
            if (msg.id === this.currentBankItem.id) {
              this.bankCardItem.splice(index, 1);
            }
          });
        } else {
          this.$Toast(res.data.msg);
          this.deletePassword = "";
          return false;
        }
        //console.log(res);
      });
    },
    getMobileCode() {
      let sendEv = {
        phone: this.phone,
        sendType: "con_smstype_register "
      };
      this.$axios.post(`ym/public/member-send-verifycode`, sendEv).then(res => {
        //console.log(res);
        if (res.data.code === 0) {
          this.countdown();
          this.btnDb = true;
          this.num = 300;
        } else {
          this.btnDb = true;
          this.$Toast(res.data.msg);
          this.num = res.data.data.residueSecond;
          this.countdown();
        }
      });
    },
    getBankList() {
      this.$axios.get(`ym/memberbank/list`).then(res => {
        //console.log(res);
        if (res.code === 0) {
          let list = res.data;
          list.forEach(msg => {
            this.bankColumns.push({
              text: msg.bankName,
              value: msg.id
            });
          });
        } else {
          this.$Toast("银行卡获取失败!");
        }
      });
    },
    onConfirm(ev) {
      //console.log(ev);
      this.bank = ev;
      this.showPicker = false;
    },
    countdown() {
      let interval = setInterval(() => {
        this.num--;
        this.btnText = `${this.num}后重试`;
        if (this.num === 0) {
          clearInterval(interval);
          this.btnDb = false;
          this.btnText = `发送验证码`;
        }
      }, 1000);
      interval;
    },
    addBank() {
      let event = {
        paypassword: this.password,
        bankId: this.bank.value,
        branchBankName: this.bankBranch,
        bankAddress: this.addr,
        bankCardNo: this.cardNum,
        mobileOrEmailCode: this.mobileCode
      };
      this.$axios.post(`ym/member-bankmanager/bind-bank`, event).then(res => {
        //console.log(res);
        if (res.data.code === 0) {
          this.$Toast(res.data.msg);
          this.addBankCardBottomPopup = false;
          this.getCardList();
          this.password = null;
          this.bankColumns = null;
          this.addr = null;
          this.mobileCode = null;
        } else {
          this.$Toast(res.data.msg);
          return false;
        }
      });
    },
    onInput(key) {
      this.deletePassword = (this.deletePassword + key).slice(0, 6);
    },
    onDelete() {
      this.deletePassword = this.deletePassword.slice(
        0,
        this.deletePassword.length - 1
      );
    }
  }
};
</script>
<style lang="scss">
.bottomBtn {
  background: #4caf50;
  color: #fff;
  border-radius: 30px;
  border-color: #fff;
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
}
</style>